<template>
  <view class="page">
    <Header></Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'个人评测-场景口语'"> </Breadcrumb>
        <view class="content">
          <view class="scene_container" v-show="!isSelectScene">
            <view class="scene_title"> 1、选择场景 </view>
            <view class="scene_content" style="padding: 0 80rpx">
              <view
                class="scene_box"
                v-for="(item, index) in sceneList"
                :key="index"
                @click="getTopic(item)"
              >
                <view class="scene_text">
                  {{ item.name }}
                </view>
              </view>
            </view>
          </view>
          <view class="scene_container" v-show="isSelectScene">
            <view class="scene_title"> 2. 选择话题 </view>
            <view class="scene_content" style="padding: 0 180rpx">
              <view
                class="topic_box"
                v-for="(item, index) in topicList"
                :key="index"
                @click="viewDetails(item)"
              >
                <view class="topic_text">
                  {{ item.topicTitle }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getTopicList } from "@/api/spoken";
export default {
  components: {},
  data() {
    return {
      isSelectScene: false,
      isSelectTopic: false,
      sceneList: [
        {
          name: "美食",
          id: 1,
        },
        {
          name: "乘车",
          id: 2,
        },
        {
          name: "家庭",
          id: 3,
        },
        {
          name: "兴趣爱好",
          id: 4,
        },
        {
          name: "天气",
          id: 5,
        },
        {
          name: "购物",
          id: 6,
        },
        {
          name: "日常闲谈",
          id: 7,
        },
        {
          name: "学校生活",
          id: 8,
        },
        {
          name: "健康",
          id: 9,
        },
        {
          name: "民间风俗",
          id: 10,
        },
        {
          name: "赞美别人",
          id: 11,
        },
        {
          name: "去旅游",
          id: 12,
        },
      ],
      topicList: [],
      sceneId: 1,
      topicId: 1,
    };
  },
  onLoad() {},
  methods: {
    getTopic(item) {
      this.sceneId = item.id;
      let params = {
        id: this.sceneId,
      };
      getTopicList(params).then((res) => {
        this.topicList = res.data;
        this.isSelectScene = true;
      });
    },
    viewDetails(item) {
      this.isSelectTopic = true;
      this.topicId = item.id;
      uni.navigateTo({
        url: `/pages/scene/sceneListen?sceneId=${this.sceneId}&topicId=${this.topicId}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./scene";
</style>
